<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card>
          <Detail title="总销售额" cotent="￥12305">
            <template slot="charts">
              <span>
                周同比 56.67% &numsp;&numsp;<svg
                  t="1668744525605"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="6320"
                  width="16"
                  height="16"
                >
                  <path
                    d="M512 405.333333L298.666667 618.666667h426.666666L512 405.333333z"
                    fill="#d81e06"
                    p-id="6321"
                  ></path></svg>&numsp;&numsp;日同比 19.16%&numsp;&numsp;<svg
                  t="1668744414284"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="5072"
                  width="16"
                  height="16"
                >
                  <path
                    d="M512 618.666667L298.666667 405.333333h426.666666L512 618.666667z"
                    fill="#1296db"
                    p-id="5073"
                  ></path>
                </svg>
              </span>
            </template>
            <template slot="footer">
              <span>日销售额￥12306</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="访问量" cotent="88460">
            <template slot="charts">
              <lineCharts></lineCharts>
            </template>
            <template slot="footer">
              <span>日访问量￥1234</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="支付笔数" cotent="88460">
            <template slot="charts">
              <BarCharts></BarCharts>
            </template>
            <template slot="footer">
              <span>转化率64%</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="运营活动效果" cotent="78%">
            <template slot="charts">
              <ProgressEcharts></ProgressEcharts>
            </template>
            <template slot="footer">
              <span>
                周同比 56.67% &numsp;&numsp;<svg
                  t="1668744525605"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="6320"
                  width="16"
                  height="16"
                >
                  <path
                    d="M512 405.333333L298.666667 618.666667h426.666666L512 405.333333z"
                    fill="#d81e06"
                    p-id="6321"
                  ></path></svg>&numsp;&numsp;日同比 19.16%&numsp;&numsp;<svg
                  t="1668744414284"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="5072"
                  width="16"
                  height="16"
                >
                  <path
                    d="M512 618.666667L298.666667 405.333333h426.666666L512 618.666667z"
                    fill="#1296db"
                    p-id="5073"
                  ></path>
                </svg>
              </span>
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from "@/views/dashboard/Card/Detail";
import lineCharts from "./LineEcharts";
import BarCharts from "./BarCharts";
import ProgressEcharts from "./ProgressCharts";
export default {
  name: "MyCard",
  components: {
    Detail,
    lineCharts,
    BarCharts,
    ProgressEcharts,
  },
};
</script>

<style>
</style>